<script lang="ts" setup>

</script>

<template>
  <UCard
    class="min-w-[270px]" :ui="{
      header: {
        padding: '',
      },
      body: {
        padding: 'px-6 py-3 sm:p-4',
      },
    }"
  >
    <template #header>
      <USkeleton class="h-40 w-[270px]" :ui="{ rounded: tw`rounded-t-lg rounded-b-none`.join(' ') }" />
    </template>
    <div class="space-y-1 w-full text">
      <div class="flex items-center justify-between">
        <USkeleton class="h-8 min-w-[80px] w-1/3" />
        <USkeleton class="h-6 min-w-[40px] w-1/6 bg-red-300" />
      </div>
      <USkeleton class="h-4 min-w-[180px]" />
      <USkeleton class="h-4 min-w-[150px]" />
    </div>
  </UCard>
</template>

<style></style>
